<template lang="pug">
.specimen-info
  .specimen-info__query
    .specimen-info__query-select
      mt-input(
        placeholder="请输入标本条码"
        v-model="keyword"
      ) 
    .specimen-info__query-button
      Button(
        label="快速查询"
        type="success"
        :loading="loadingMap.specimenList"
        @click="onQuery"
      )
  .specimen-info__form
    el-scrollbar
      LisSpecimen(
        :selectEquipment="editingObj" 
        :buttonShow="buttonShow" 
        specimen-status
        ref="specimenRef" 
      )
        template(
          #footer
        )
          .actions
            .actions__left
            .actions__right
              .actions__right-first(
                v-if="showSpecimenActions"
              )
                Button(
                  v-for="item of formActions"
                  :key="item.event"
                  :label="item.label"
                  :type="item.type"
                  :disabled="item.disabled"
                  @click="onClickSepcimenButton(item)"
                )
              .actions__right-second
                Button(
                  v-for="item of secondButtons"
                  :key="item.label"
                  :label="item.label"
                  :type="item.type"
                  :disabled="item.disabled"
                  :loading="item.loading"
                  @click="item.onClick"
                )
</template>

<script setup lang="ts">
import { ESpecimenStatus } from "@scmt/api-common";
import { type SpecimenEntity } from "@scmt/api-lis-specimen";
import {
  type IAction,
  useMessage,
  useNotify,
  Button,
} from "@scmt/common-components";
import LisSpecimen from "../../components/lisSpecimen.vue";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import { useSpecimenButtons } from "../composbles/buttons";
import { useUtils } from "@scmt/lib-utils";
import { useUser } from "@scmt/common-store";
import { useOnPageActions } from "../composbles/pageActions";

const props = defineProps({
  specimen: {
    type: Object as PropType<SpecimenEntity | null>,
    default: () => null,
  },
});
const emits = defineEmits<{
  saved: [SpecimenEntity];
}>();

const $api = useApi();
const $utils = useUtils();
const $message = useMessage();
const $notify = useNotify();
const user = useUser();

const specimenRef = ref<InstanceType<typeof LisSpecimen>>();
const { specimen } = toRefs(props);

const { getButtonByStatus } = useSpecimenButtons();
const { onPageActions } = useOnPageActions();

const keyword = ref("");
const buttonShow = ref(true);
const editingObj = ref<null | SpecimenEntity>(null);
const { loadingMap, request } = useRequest({
  specimenList: async () => {
    return $api.lis.specimen.list({
      keyword: keyword.value,
    });
  },

  save: async (model: SpecimenEntity) => {
    return $api.lis.specimen.add(model).then((res) => {
      $notify.success("保存成功");

      emits("saved", res);
    });
  },
});

const formActions = computed(() =>
  editingObj.value?.id ? getButtonByStatus(editingObj.value.state) : []
);

const showSpecimenActions = computed(() => Boolean(formActions.value.length));

const secondButtons = computed(() => {
  return [
    {
      label: "新增登记",
      type: "success",
      onClick: () => {
        buttonShow.value = false;
        editingObj.value = $api.lis.specimen.$$createEntity({
          billingTime: $utils.date().format("YYYY-MM-DD HH:mm:ss"),
          billingDepartment: user.currentOfficeId,
          billingDepartmentName: user.currentOfficeName,
          billingDoctor: user.userId,
          billingDoctorName: user.username,
          state: ESpecimenStatus.NOTGENERATED,
          source: "1",
        });
      },
    },
    {
      label: "保存",
      type: "primary",
      loading: loadingMap.save,
      disabled: Boolean(editingObj.value?.id),
      onClick: () => {
        specimenRef.value?.validate((valid, model) => {
          if (valid) {
            request("save", model);
          }
        });
      },
    },
    {
      label: "清空",
      type: "primary",
      onClick: () => {
        editingObj.value = $api.lis.specimen.$$createEntity({});
      },
    },
  ];
});

watch(specimen, (val) => {
  if (val) {
    editingObj.value = $api.lis.specimen.$$createEntity(val);
  }
});

const onQuery = () => {
  if (keyword.value) {
    request("specimenList", {
      onSuccess: (res) => {
        if (res && res.length > 0) {
          editingObj.value = $api.lis.specimen.$$createEntity(res[0]);
        } else {
          editingObj.value = $api.lis.specimen.$$createEntity({});
          $message.warning("无查询结果!!!");
        }
      },
    });
  } else {
    $message.warning("请输入查询条件!!!");
  }
};

const onClickSepcimenButton = (action: IAction) => {
  // 这里是肯定会存在的
  if (specimen.value) {
    onPageActions(action, specimen.value!);
  }
};
</script>

<style lang="less" scoped>
.specimen-info {
  height: 100%;
  box-sizing: border-box;
  padding: var(--mt-padding);
  display: flex;
  flex-direction: column;

  &__query {
    flex-shrink: 0;
    display: flex;

    &-select {
      flex: 1;
      overflow: hidden;
    }

    &-button {
      margin-left: var(--mt-margin);
      flex-shrink: 0;
    }
  }

  &__form {
    flex: 1;
    overflow: hidden;
    margin-top: var(--mt-margin-large);
  }
}

.actions {
  display: flex;
  &__left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.mt-button) {
      width: 100%;
      height: 100%;
      font-size: 24px;
    }
  }
  &__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--mt-margin-large);
    & > * {
      display: flex;
      justify-content: flex-end;
    }

    &-first {
      margin-bottom: var(--mt-margin-large);
    }
  }
}
</style>
